<template>
	<image :src="bgImg" class="headBg" mode="widthFix" />
	<view class="content">
		<view class="main">
			<view class="bar">
				<view class="rank">排名</view>
				<view class="middle">用户</view>
				<view class="num">邀请人数</view>
			</view>
			<view class="page">
				<list reqUrl="/api/invite/rank" ref="listInstance">
					<template v-slot="{ list }">
						<view class="list" v-for="(item,index) in list" :key="item.head_img">
							<view class="no">
								<image v-if="index<3" :src="'/static/image/no' + (index + 1) + '.png'" class="icon" />
								<text class="text" :class="{before3:index<3}">{{index+1}}</text>
							</view>
							<view class="userInfo">
								<view class="face">
									<fr-image class="img" mode="aspectFill" :src="item.head_img" radius="50%" />
								</view>
								<view class="nick one-line">{{item.nickname}}</view>
							</view>
							<view class="num">
								<u-count-to :startVal="0" :endVal="item.inviteNum" color="#6b6b6b" fontSize="18"
									:duration="800"></u-count-to>
							</view>
						</view>
					</template>
				</list>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref, computed } from 'vue';
	import request from '@/utils/common/request/index';
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import { useGlobalNetworkImageStore } from '@/store/modules/useGlobalNetworkImage.js';

	const { imgHost } = getApp().globalData;
	const globalNetworkImageStore = useGlobalNetworkImageStore();
	const bgImg = computed(() => {
		return imgHost + globalNetworkImageStore.value.phbTopImg;
	})
	/**列表 */
	const listInstance = ref();
	let goodsList = ref([]);
	let reqData = {
		limit: 20
	};
	/**下拉刷新事件 */
	onPullDownRefresh(() => {
		Promise.all([listInstance.value.resetRequest()]).finally(() => {
			uni.stopPullDownRefresh();
		});
	});
	// * 页面触底事件，不能删除，否则不能触发list组件触底事件
	onReachBottom(() => {});
</script>

<style lang="scss" scoped>
	.headBg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	.content {
		position: absolute;
		left: 14px;
		right: 14px;
		top: 140px;
		padding-bottom: 14px;

		.main {
			overflow: hidden;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0 20px 10px #e3e3e3;
		}
	}

	.bar {
		display: flex;
		padding: 10px 14px;
		color: #999;
		font-size: 15px;

		.rank {
			box-sizing: border-box;
			padding-left: 10px;
			width: 55px;
			flex-shrink: 0;
		}

		.middle {
			flex: 1;
			padding-left: 8px;
		}

		.num {
			text-align: center;
			width: 70px;
		}
	}

	.page {
		background-color: #fff;
	}

	.list {
		margin-bottom: 14px;
		display: flex;
		align-items: center;

		.no {
			position: relative;
			width: 55px;
			height: 55px;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				width: 40px;
				height: 40px;
			}

			.text {
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: 5px;
				transform: translate(-50%, -50%);
				font-weight: bold;

				&.before3 {
					color: #fff;
				}
			}
		}

		.userInfo {
			flex: 1;
			display: flex;
			align-items: center;
			padding-left: 5px;

			.face {
				flex-shrink: 0;
				width: 48px;
				height: 48px;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.nick {
				padding-left: 10px;
				font-size: 15px;
				color: #6b6b6b;
			}
		}

		.num {
			width: 70px;
			text-align: center;
		}
	}
</style>
<style>
	/*只能在这里设置*/
	page {
		background-color: #f5f5f5;
	}
</style>